<template>
  <div class="dashboard-container">

<!--    <div class="userInfoTest">-->
<!--      <div class="dashboard-text" style="color: #3A71A8">登录用户：</div>-->
<!--      <div class="dashboard-text">name: {{ name }}</div>-->
<!--      <div class="dashboard-text">getStoreName: {{ getstore }} </div>-->
<!--      <div class="dashboard-text">roles: {{ roles }}</div>-->
<!--      <div class="dashboard-editor-link">-->
<!--        <router-link :to="{name:'Tree'}">-->
<!--          Router-Link1（Tree）-->
<!--        </router-link>-->
<!--      </div>-->
<!--    </div>-->

    <component :is="curRoleDashboard" />

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './roleDashboard/admin'
import ordinaryDashboard from './roleDashboard/ordinary'
import alumniDashboard from './roleDashboard/alumni'
import teacherDashboard from './roleDashboard/teacher'
import studentDashboard from './roleDashboard/student'

export default {
  name: 'Dashboard',
  components:{
    adminDashboard,
    ordinaryDashboard,
    alumniDashboard,
    teacherDashboard,
    studentDashboard
  },
  data(){
    return{
      curRoleDashboard:'ordinaryDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    // 一般store中取数据
    getstore(){
      return this.$store.state.user.name
    }
  },
  created(){
    if(this.roles.includes('admin')){
      this.curRoleDashboard = 'adminDashboard'
    }else if(this.roles.includes('alumni')){
      this.curRoleDashboard = 'alumniDashboard'
    } else if(this.roles.includes('teacher')){
      this.curRoleDashboard = 'teacherDashboard'
    }else if(this.roles.includes('student')){
      this.curRoleDashboard = 'studentDashboard'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .userInfoTest{
    margin-bottom: 16px;
    background: #ffffff;
    padding: 16px 16px 0;
    height: 150px;
    position: relative;
  }

  .dashboard {
    &-container {
      padding: 10px 30px;
      background-color: rgb(240, 242, 245);
      position: relative;
    }
    &-text {
      padding: 3px;
      font-size: 20px;
      line-height: 25px;
    }
    &-link{
      font-size: 20px;
      line-height: 25px;
      color: red;
    }
}
</style>
